HTML5 Hap Pas Hapi: Integrimi i fotove/figurave

Autor: Skender Mustafi

Përmes formave (anglisht: canvas) të ndryshme që mund të kombinohen me HTML e që tani JQuerry format janë të standardizuara për HTML5, HTML mundëson integrimin e medieve të ndryshme si video, audio, foto, flash etj.. Më poshtë do të sqarojmë se si bëhet integrimi i medieve në një kodt HTML5 dhe atributet të cilat ky kod mbështetë dhe mund të integrohen.

Integrimi i fotove

Etiketa përmes së cilës bëhet integrimi i fotove në HTML5 është <img>.

Atributet të cilat HTM5 mbështetë për këtë etiketë janë:

  • alt – mund të përcaktoni një tekst i cili paraqitet me të ofruar miun mbi foto: alt=”logo e faqes”
  • height – përcakton lartësinë e fotos:  height=”120px”
  • ismap – përcakton nëse fotografia përmbanë hapsira të cilat janë të specifikuara si nyje mbi të cilat mund të klikohet: ismap
  • src – është atributi bazë pa të cilin nuk mund të paraqitet fotografia, përcakton burimin e fotografisë i cili mund të është i brendshëm ose i jashtëm: src=”fjalaime-logo.png” ose src=”https://www.fjalaime.ch/fjalaime-logo.png”
  • usemap – mundëson vendosjen e koordinatave të ndryshme në foto të cilat pastaj kthehen në nyje të cila mund të klikohen. Le të marrim shembull se kemi një foto me planetët në të dhe duam që planetët t’i lidhim me nyje përmes këtij atributi. Fillimisht lidhim foton me burimin dhe përcaktojmë madhësinë dhe e lidhim me hartën me një emër sipas dëshire p.sh. #planetët dhe planetët  fund hapim hartën ku vendosim hapësirat që duam ti përshkruajmë dhe t’i lidhim.
  • Shembull:

<img src=”foto.png” width=”365″ height=”326″ usemap=”#planetët “>
<map name=”planetët “>
<area shape=”rect” coords=”0,0,82,126″ href=”dielli.htm” alt=”Dielli”>
<area shape=”circle” coords=”90,58,3″ href=”mërkuri.htm” alt=”Mërkuri”>
 <area shape=”circle” coords=”124,58,8″ href=”venera.htm” alt=”Venera”>
 </map>

Vini Re: Përcaktimi i koordinatave në foto fillon nga këndi i majtë sipër i hartës së fotos (jo nga këndi i majtë sipër i faqes në tërësi).

  • width – përcakton gjerësinë e fotos: width=”365″

Ja një shembull i atributeve të kombinuar të një fotoje: <img src=”fjalaime-logo.png” width=”700″ height=”120″ alt=”Logoja e faqes” >

Një etiketë tjetër e paraqitur si standarde në HTML5 është <figure>. Kjo etiketë në vete përmban edhe etiketën <figcaption> që mundëson paraqitjen e titullit të figurës. Kjo etiketë shfrytëzohet me etiketën <img> si më poshtë:

<figure>
<img src=”fjalaime-logo.png” width=”700″ height=”120″ alt=”Logoja e faqes” >
<figcaption>Figura 1. – Logoja e faqes Fjalaime!</figcaption>
</figure>

integrimi i fotografive
Figura 1. – Shkëputje nga faqja Fjalaime!

Po këto i keni lexuar?